<template>
  <el-scrollbar style="height:100%" class="opration-container">

  <div class="opration">
    <div class="oprationLeft">
      <bs-add-button-icon @click.native="addClick" v-has="'MEDIA_PROGRAM_SAVE'"></bs-add-button-icon>
      <bs-delete-button-icon @click.native="deleteClick" v-has="'MEDIA_PROGRAM_DELETE'"></bs-delete-button-icon>
      <bs-edit-button-icon @click.native="editClick" v-has="'MEDIA_PROGRAM_UPDATE'"></bs-edit-button-icon>
      <bs-action-drop-down
        :items="actionItems"
        @click="actionDropClick"></bs-action-drop-down>
      <bs-refresh-button-icon @click.native="refreshClick"></bs-refresh-button-icon>
      <el-select class="show-item" size="small" v-model="filterVal" @change="filterChange" style="width:120px;">
        <el-option
          v-for="item in filterOpts"
          :key="item.value"
          :label="$t(item.label)"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="oprationRight">
      <el-form :inline="true" size="small" :model="searchForm">
        <el-form-item>
          <el-select v-model="searchForm.name" :placeholder="$t('全部选项')" clearable style="width:95px;">
            <el-option
              v-for="(item, index) in searchItemData"
              :key="index"
              :label="$t(item.name)"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- <input v-model="searchForm.name" type="hidden" value="1" /> -->
          <el-input
            :placeholder="$t('请输入关键词搜索')"
            v-model="searchForm.value"
            clearable
            style="width:160px;"
          >
            <template slot="prepend">
              <i class="iconfont icon-sousuo" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <bs-search-button-icon @click.native="searchClick"></bs-search-button-icon>
        </el-form-item>
      </el-form>
    </div>
  </div>

  </el-scrollbar>
</template>
<script>
export default {
  name: 'ConditionRow',
  data() {
    return {
      searchForm: {
        name: '',
        value: ''
      },
      searchItemData: [
        { name: '全部选项', value: 0 },
        { name: '名称', value: 1 },
        { name: '有效性', value: 3 }
      ],
      showItem: '',
      actionItems: [
        '预览',
      ],
      filterOpts: [
        {label: '所有', value: ''},
        {label: '待审核', value: 0},
        {label: '已通过', value: 1},
        {label: '已拒绝', value: -1},
      ],
      filterVal: ''
    }
  },
  components: {},

  mounted(){
    this.checkAuditPermission()
  },
  methods: {
     checkAuditPermission(){
      const hasAudit = this.$checkOperationPermission('MEDIA_PROGRAM_AUDIT')
      if(hasAudit){
        this.actionItems.push('审核')
      }
      const hasSave = this.$checkOperationPermission('MEDIA_PROGRAM_SAVE')
      if(hasSave){
        this.actionItems.push('另存为')
      }
    },
    addClick() {
      this.$emit('add')
    },
    actionDropClick(item) {
      this.actionItems.indexOf(item) !== -1 && this.$emit('action', item)
    },
    deleteClick() {
      this.$emit('del')
    },
    editClick() {
      this.$emit('edit')
    },
    filterChange(v) {
      this.$emit('filter', v)
    },
    refreshClick() {
      this.searchForm = {
        name: 0,
        value: '',
      }
      this.$emit('search', this.searchForm)
      // this.$emit('refresh')
    },
    searchClick() {
      if (this.searchForm.name > 0) {
        this.$emit('search', this.searchForm)
      } else {
        this.$emit('search', {
          name: 0,
          value: this.searchForm.value,
        })
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.oprationLeft {
  flex-shrink: 0;
}
</style>